<template>
	<view class="withdrawal-item">
		<view class="navbar">
			<navBar :title="'转入'"></navBar>
		</view>
		<view class="content-item">
			<view class="head-content">
				<view class="title">可用佣金</view>
				<view class="number">{{number}}</view>
			</view>
			<view class="mid-item">
				<view class="charge-number">转入数额</view>
				<view class="outpay">佣金转余额，最低500起转入</view>
			</view>
			<view class="tis-item">
				<view class="choose-number" v-for="(item,num) in numlist" :key="item.num" @tap="chooseNum(num)">{{item.num}}</view>
			</view>
			<view class="submit-number">
				<view class="charge-money">转入数量</view>
				<input type="number" class="input" placeholder="请输入或选择金额">
			</view>
			<view class="bottom-tip">
				<view class="big-write">可用余额<text style="color:#F71D1F; margin-left:10px;">{{canUseNumber}}</text></view>
			</view>
		</view>
		<view class="bottom-button">
			<view class="consent-button">
				<text class="button-item">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components:{
			navBar
		},
		data() {
			return {
				number:"12000.000",
				canUseNumber:"0.00",
				numlist:[
					{
						num:"500"
					},
					{
						num:"600"
					},
					{
						num:"800"
					},
					{
						num:"1000"
					},
					{
						num:"1200"
					},
					{
						num:"2000"
					},
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.withdrawal-item{
	position: relative;
	height: 100vh;
	.content-item{
		margin: 0 20px;
		.head-content{
			height: 220rpx;
			background-image: url('~@/static/images/mine/extract/background.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			border-radius: 20rpx;
			box-shadow: 0px 2px 5px rgba(247, 29, 31, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.title{
				color: rgba(255, 255, 255, 0.7);
				font-size: 34rpx;
				font-family: AlibabaPuHuiTi_2_55_Regular;
			}
			.number{
				color: #FFFFFF;
				font-size: 70rpx;
				font-family: Alimama_ShuHeiTi_Bold;
			}
		}
		.mid-item{
			display: flex;
			margin-top:5%;
			.charge-number{
				font-size:16px;
				font-weight: bold;
			}
			.outpay{
				font-size: 13px;
				color: #00000040;
				margin-left:2%;
				line-height: 25px;
			}
		}
		.tis-item{
			display: flex;
			width:100%;
			padding:10px 0;
			flex-wrap: wrap;
			.choose-number{
				width: 30%;
				height: 50px;
				display:block;
				background: #FFFFFF;
				box-shadow: 0px 3px 15px 1px rgba(0,0,0,0.1);
				opacity: 0.83;
				margin:10px 5px;
				text-align: center;
				line-height:50px;
				font-weight: bold;
				font-size: 18px;
			}
		}
		.submit-number{
			padding:15px 15px;
			border-radius: 10px 10px 10px 10px;
			opacity: 0.83;
			border: 1px solid #E4E4E4;
			display: flex;
			justify-content: space-between;
			.charge-money{
				font-weight: normal;
				color: #000000;
				line-height:20px;
			}
			.input{
				line-height:30px;
				text-align: right;
				font-size: 15px;
				margin-top: 2px;
			}
		}
		.bottom-tip{
			margin-top:10px;
			.big-write{
				color: #00000040;
				font-size:13px;
			}
			.out-money{
				color:  #00000040;
				font-size:13px;
			}
		}
	}
	.bottom-item{
		display: flex;
		justify-content:space-between;
		position: absolute;
		bottom: 0;
		left:0;
		right: 0;
		.infor-button{
			padding:15px 20px;
			text-align: left;
			width: 60%;
			background-image: url('~@/static/images/mine/integral/consetpay.png');
			opacity: 1;
			color:#F71D1F;
			font-size:20px;
		}
		.button-box{
			text-align:center;
			background:#F71D1F;
			width: 40%;
			.consent-pay{
				color: #FFFFFF;
				line-height:60px;
			}
		}
		
	}
	.button-box {
		text-align: center;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.button-one {
			display: inline-block;
			padding: 0 10px;
			width: 120rpx;
			height: 58rpx;
			line-height: 58rpx;
			margin: 0 40rpx 0 0;
			text-align: center;
			color: #000000;
			border: 2px solid #000000;
			border-radius: 14rpx;
			font-size: 26rpx;
			font-family: PingFang_Bold;
			cursor: pointer;
		}
	
		.button-two {
			padding: 0 10px;
			background-color: #000000;
			display: inline-block;
			width: 120rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 14rpx;
			font-size: 26rpx;
			// font-weight: bold;
			font-family: PingFang_Bold;
			cursor: pointer;
		}
	}
	.bottom-button{
		text-align:center;
		margin-top:40px;
		.consent-button{
			width:90%;
			height:50px;
			background-color: #F71D1F50;
			margin: 0 4%;
			border-radius: 10px 10px 10px 10px;
			.button-item{
				display: block;
				font-size: 18px;
				opacity: 0.6;
				line-height:50px;
				color: #FFFFFF;
			}
		}
	}
}
</style>
